import "reflect-metadata";
// import style from "/src/css/main.css?raw";
import { Element, Props, Method, Watch } from '@utils/decorators.utils'

import "@/components/eye/eye.ts";
import "@/components/arm/arm.ts";
import "@/components/mouth/mouth.ts";
import "@/components/blush/blush.ts";
import "@/components/leg/leg.ts";


@Element({
    tag: "m-test",
})
class Test extends HTMLElement {

    @Props
    item!: { id: number, name: string }[];

    @Props
    size!: string;

    @Props
    color!: string;

    @Props
    name!: string;

    @Props
    width!: string;

    @Props
    height!: string;

    @Props
    xoffset: number = 0;

    @Props
    yoffset: number = 0;

    render() {
        return `
          <div class="kirby-fly ${this.name}" xoffset="${this.xoffset}" yoffset="${this.yoffset}" 
            <h1>测试</h1>
          </div>
        `
    }

    // 监听props属性，返回新值和旧值
    @Watch("item")
    WatchPropHandler(newValue: any, oldValue: any) {
        console.log("111: ", newValue, oldValue);
    }

    // 为指定元素绑定事件
    @Method({ type: "click", tag: ".list li" })
    liClick(e: Event) {
        e.stopPropagation();
        console.log("liClick: ", e);
    }

    @Method({ type: "click", tag: ".name" })
    nameDivClick(e: Event) {
        e.stopPropagation();
        console.log("nameDivClick: ", this.size);
    }

    @Method({ type: "click", tag: ".test" })
    testDivClick(e: Event) {
        console.log("testDivClick: ", this.color);
    }

    // 自定义元素添加至页面
    connectedCallback() {}

    // 自定义元素从页面中移除
    disconnectedCallback() {}

    // 自定义元素移动至新页面
    adoptedCallback() {}

    // 自定义元素属性变更时被调用
    attributeChangedCallback(name, oldValue, newValue) {
        console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}。`);
    }

}